body{
	font-family: "microsoft yahei";
}
body:after{
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%; 
	background-attachment: fixed;
	z-index: -1;
}

.rule{
	margin-top: 10%;

	img{
		width: 100%;
	}
}

.rule + a{
	display: block;
	margin-top: -40%;

	img{
		width: 100%;
	}
}

ul.page_2{
	list-style: none;
	margin: 15% 0 0;
	padding: 0;

	li{
		margin-bottom: 7%; 


		img{
			width: 100%;
		}
	}	
}

ul.page_3{
	list-style: none;
	margin: 15% 0 0;
	padding: 0;

	li{

		img{
			width: 100%;
		}
	}
	
	li:first-child{
		img{
			position: relative;
			z-index: 2;
			display: block;
		}
	}

	li:nth-child(2){
		margin-top: -15%;
		position: relative;

		.img_content{
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;

			img{
				width: 65%;
				position: relative;
				left: 17.5%;
			}
		}
	}

	li:nth-child(3){
		text-align: center;

		img{
			width: 40%;
		}
	}
}

ul.page_4{
	list-style: none;
	margin: 15% 0 0;
	padding: 0;

	li{

		img{
			width: 100%;
		}
	}

	li:first-child{
		position: relative;
		margin-bottom: 12%;

		.upload_wrapper{
			position: relative;
			width: 64%;
			left: 18%;
			margin-top: -58%;
			height: 54%;

			&:after{
				display: table;
				content: "";
				clear: both;
			}

			>*{
				float: left;
				width: 40%;
				text-align: center;
			}

			p{
				width: 33%;
				margin: 0;
				padding: 27% 0;

				img{
					width: 45%;
				}	
			}

			div{
				width: 56%;
				position: absolute;
				left: 33%;
				height: 100%;

				img{
					width: 80%;
					height: 80%;
					position: absolute;
					left: 10%;
					top: 7%;
				}	
			}
		}
	}

	li:nth-child(2){
		background-image: url(../images/input.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: 0 0;

		input{
			display: block;
			width: 100%;
			height: 40px;
			background-color: transparent;
			border-style: none;
			padding-left: 20%;

			&:first-child{
				position: relative;
				top: -3px;
			}
		}
	}

	li:nth-child(3){
		margin-bottom: 40px;

		img{
			width: 70%;
			position: relative;
			left: 15%;
		}
	}
}

.page_5{
	
	> img{
		width: 100%;
	}
	> img:last-child{
		margin-bottom: 40px;
	}
	
	ul.nav-tabs{
		border-style: none;
		width: 80%;
		position: relative;
		left: 10%;

		li,li.active{
			width: 50%;
			background-image: url(../images/tab_bg.png);
			background-repeat: no-repeat;
			background-position: 0 0;
			background-size: 100% 100%;
			text-align: center;
			border-style: none;
			color: #000;
			
			a{
				background: none;
				border-style: none;
				padding: 10px 0;
				width: auto;
				color: #000;
			}
		}
	}

	.tab-content ul.tab-pane{
		width: 80%;
		position: relative;
		left: 11%;

		li{
			width: 30%;
			float: left;
			margin-right: 3.333%;
			text-align: center;
			background-image: url(../images/img_list_bg.png);
			background-position: 0 20px;
			background-size: 100% 90%;
			background-repeat: no-repeat;

			img{
				width: 80%;
				height: 90%;
				margin-top: -15px;
				margin-bottom: 5px;
			}

			p{
				color: #fff;
				margin: 0 auto;
				width: 40px;
				height: 40px;
				line-height: 40px;
				font-size: 22px;
				background-image: url(../images/num_bg.png);
				background-position: 0 0;
				background-size: 100% 100%;
				position: relative;
				z-index: 2;
			}
		}
	}
	
}

ul{
	list-style: none;
	padding: 0;
}
.hide{
	display: none;
}
ul.tab-pane{
	display: none;
}
ul.tab-pane.active{
	display: block;
}

.modal_wrapper{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;

	>img.cancel{
		position: absolute;
		right: 20px;
		top: 20px;
		width: 40px;
		height: 40px;

		@media screen and (max-width:400px) {
			right: 10px;
			top: 10px;
			width: 30px;
			height: 30px;
		}
	}
	
	h1{
		color: #fff;
		width: 80px;
		height: 60px;
		overflow:hidden;
		text-overflow:ellipsis;
		text-align: center;
		background-image: url(../images/num_bg.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 50%;
		margin: 10px auto 0;
		padding: 10px 0 10px;
	}

	.img_wrapper{
		font-size: 0;

		>img{
			width: 82%;
			position: relative;
			left: 9%;
		}

		.dianzan{
			width: 100%;
			position: relative;

			img{
				width: 100%;
			}

			p{
				font-size: 18px;
				color: #fff;
				position: absolute;
				top: 5%;
				left: 40%;
			}
		}
	}
}